//Q基础库
//@import "*";
//常量
$sm: 768px; //小屏幕比例
$md: 992px; //中屛
$lg: 1200px; //屏幕
$mobile:true;//是否应用于手机端
$flex:true;//使用flex布局
$rem:100;
//菜单颜色 主vi色
$sideBg:#2a58ad;
$sideHover:#2aabed;
$bg:#eaeef1;
$headerBg :#fff;
//size math rem
@function size($p,$u:px,$r:$rem) {
    @if $u == px{
        //普通
        @return $p+$u; 
    }@else if $u == rem{
        @return ($p/$r)+$u;
    }
}

//font style
$f-style:'Microsoft YaHei',Arial, Helvetica, sans-serif;
$f:16px;//font default
$f-sm:12px; //font small

//color
$blue:#2aabed;
$red:#f00;
$orange:#ff9600;
$green:green;

//标签  数组是从1开始的 引用nth($hs,1)
$hs: h1,h2,h3,h4,h5,h6; 
$all:body,h1,h2,h3,h4,h5,h6,label,ul,li,dl,dt,dd,p,span,strong,input,select,textarea;


//transition time
$transition-t:.3;

//定位
// 利用absolute 上下居中 @include position-mid()
@mixin position-mid($position:absolute){
    position: $position;
    top: 50%;
    left:0;
    right:0;
    margin: auto;
   transform: translateY(-50%);
}

//使用flex 父级
@mixin flex-auto(){
    display:flex;
    align-content: center;
}

//absolute and margin 上下左右居中 必须有宽高
@mixin position-auto($position:absolute) {
    position: $position;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}
//使用flex 父级
@mixin flex-auto(){
    display:flex;
    justify-content: center;
    align-items: center;
}

//外观
//三角形 （方向，宽，高,颜色）@include triangle()
@mixin icon-sjx($t:bottom, $w:10px, $h:10px, $c:#000) {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: $h $w;
    border-color: transparent;
    border-#{$t}-color: $c;
}



//打×图标 div>i*3 状态 颜色
@mixin icon-close-btn($active:active,$c:#000){
    overflow:hidden;

    &>i{
        border-radius: 5px;
        display:block;
        margin: auto;
        width: 80%;
        height: 10%;
        margin-top: 17.28%;
        background-color:$c;
        @include transition();
    }
    &.#{$active}{
        &>i{

            &:nth-of-type(1){
                // width: calc( 100%*1.4142 );
                // transform-origin:0 center ;
                transform:translateY(272.8%) rotate(45deg) ;
            }
            &:nth-of-type(2){
                transform: translate3D(100%,0,0);
                opacity: 0;
            }
            &:nth-of-type(3){
                // width: calc( 100%*1.4142 );
                // transform-origin:0 center;
                transform:translateY(-272.8%)  rotate(-45deg);
            }

        }
    }
}


//加载图标 div>i*3  @include  必须设置狂傲 
@mixin icon-loading($c:#39c,$n:3,$new:1){
            //kf end
           display: flex;
           $w:100%/($n+1);
            @if $new == 1 {
                @at-root(without:all){
                    @keyframes scaleY {
                        0%,100%{
                            transform: scaleY(.3)
                        }
                        50%{
                            transform: scaleY(1)
                        }
                    }
                }
            }

            &>i{

                width:$w;
                height: 100%;
                margin-right:$w/($n - 1) ;
                background-color:$c; 
                animation: scaleY 1s linear infinite;
                transform-origin:center bottom; 
                &:nth-last-of-type(1){
                    margin-right: 0;
                }
                @for $i from 0 to $n{
                    &:nth-of-type(#{$i+1}){
                        animation-delay: -0.3*$i+s;
                    }

                }

            }
}

//蒙板 (active焦点，背后颜色，进入效果，消失效果)
//document.querySelector("").classList.toggle('active')
@mixin mask-bg($showCl:active,$c:rgba(0,0,0,.6),$leave:scale(1),$enter:scale(1)){
    position: fixed;
    left: 0;
    top:0;
    width: 100%;
    height: 100%;
    @include transition();
    z-index: 99;
    opacity: 0;
    transform: $leave;
    background-color: $c;
    pointer-events: none;
    &.#{$showCl}{
        opacity:1;
        transform:$enter;
        pointer-events: auto;
    }
}

//变形

//快速过渡@include transition()
@mixin transition($type:all, $s:$transition-t, $ease:ease) {
    transition: $type $s+s $ease;
}


//媒体
//@content 可以用来解决css3的@media等带来的问题。它可以使@mixin接受一整块样式
//@include max-media(480px) {
//body { color: red }
//}

//最大尺寸（npx）
@mixin max-media($w) {
    @media( max-width: $w ) {
        @content;
    }
}
//最小尺寸小（npx）
@mixin min-media($w) {
    @media( min-width: $w ) {
        @content;
    }
}
//animate

//循环
//@each $child in $array{ //child... }
//@for $i from 1 to 10{ //$i到9}

//跳出嵌套 @at-root
//@at-root (without: media)，@at-root (without: support)。这个语法的关键词有四个：all（表示所有），rule（表示常规css），media（表示media），support（表示support，因为@support目前还无法广泛使用，所以在此不表）。我们默认的@at-root其实就是@at-root (without:rule)。
//继承 @extend h1; 继承选择器的样式

//function @function pxToRem($px) {@return $px / $baseFontSize * 1rem;}
//引用 body{font-size:pxToRem(16px);}

//if @if $type == ocean {color: blue;} 
//@else if $type == matador {color: red;}
// @else {  color: black;}

//@extend 引用已有的样式 @extend h1 
